<template>
  <view class="about-page">
    <view class="brand">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="name">社区惠购</text>
      <text class="version">版本 v1.0.0</text>
    </view>

    <view class="card">
      <text class="title">产品介绍</text>
      <text class="desc">社区团购小程序模板，含商品、购物车、订单、团长等核心业务演示，支持本地 Mock 快速联调。</text>
    </view>

    <view class="card">
      <text class="title">联系我们</text>
      <view class="row"><text>客服邮箱</text><text class="val">support@example.com</text></view>
      <view class="row"><text>客服电话</text><text class="val">400-000-0000</text></view>
    </view>

    <view class="links">
      <view class="link" @tap="goPolicy('privacy')">隐私政策</view>
      <view class="link" @tap="goPolicy('service')">用户协议</view>
    </view>
  </view>
</template>

<script setup>
// 中文注释：关于我们页面
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const goPolicy = (type) => {
  proxy?.$showToast?.('暂未接入，示例页面')
}
</script>

<style scoped lang="scss">
.about-page { padding: 32rpx; }
.brand { display: flex; flex-direction: column; align-items: center; margin: 40rpx 0; }
.logo { width: 160rpx; height: 160rpx; border-radius: 32rpx; background: #f5f5f5; }
.name { margin-top: 12rpx; font-size: 32rpx; color: #333; font-weight: 600; }
.version { margin-top: 6rpx; font-size: 24rpx; color: #999; }
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; }
.title { font-size: 28rpx; color: #333; font-weight: 600; }
.desc { display: block; margin-top: 12rpx; color: #666; font-size: 26rpx; line-height: 1.6; }
.row { display: flex; justify-content: space-between; margin-top: 12rpx; font-size: 26rpx; color: #333; }
.val { color: #666; }
.links { display: flex; justify-content: space-around; margin-top: 32rpx; }
.link { color: #ff6b00; font-size: 26rpx; }
</style>
